<!-- 直播详情优化 -->
<template>
  <div class="liveDetails" id="liveDetails">
    <!-- 左侧信息栏 -->
    <div class="boxleft">
      <div class="bltop fillet" v-if="Introduction">
        <div class="title">
          <el-popover
            placement="right"
            width="200"
            popper-class="big_img"
            :visible-arrow="false"
            trigger="click"
          >
            <img
              :src="Introduction.roomLogo"
              class="titlelogo hands"
              slot="reference"
              v-errorImg:live
            />
            <img :src="Introduction.roomLogo" v-errorImg:live />
          </el-popover>
          <div class="zhibo" v-if="Introduction.status == 1">
            <p class="livingGif">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </p>
          </div>
          <p @click="go_to_page02(romid)" class="hands changecolone">
            <span v-if="Introduction.isShop == 1">
              <img src="@/assets/zhao/live/shop.png" />
            </span>
            {{ Introduction.roomTitle }}
          </p>
        </div>
        <p @click="go_to_page02(romid)" class="live1">实时大屏</p>
        <p class="bltime">
          开播时间
          <span>{{ timestamp(Introduction.beginUnix, "Y-M-D h:m") }}</span>
        </p>
        <p class="bltime">
          结束时间
          <span v-if="Introduction.status == 1">--</span>
          <span v-if="Introduction.status == 2">
            {{ timestamp(Introduction.endUnix, "Y-M-D h:m") }}
          </span>
        </p>
        <p class="bltime">
          直播时长
          <span>
            {{
              format_time(
                (Introduction.endUnix - Introduction.beginUnix) * 1000
              )
            }}
          </span>
        </p>

        <div class="blbtn" v-if="proList">
          <span @click="addCompare(Introduction)">添加对比</span>
          <!-- <span @click="go_to_page02(romid)">直播大屏</span> -->
        </div>
      </div>
      <div class="blbot fillet" v-if="DetailInfo != null">
        <div class="portrait hands">
          <el-popover
            placement="right"
            width="200"
            popper-class="big_img"
            :visible-arrow="false"
            trigger="click"
          >
            <img :src="DetailInfo.logo" slot="reference" />
            <img :src="DetailInfo.logo" @click="totable(DetailInfo.authorId)" />
          </el-popover>
          <p class="changecol" @click="totable(DetailInfo.authorId)">
            <b class="hoverb">{{ DetailInfo.nickName }}</b>
            <span>抖音号：{{ DetailInfo.uniqueId }}</span>
          </p>
        </div>
        <div class="infor sex">
          性别
          <img
            class="sex"
            v-if="DetailInfo.gender == 2"
            src="@/assets/shi/girl.png"
            alt
          />
          <!-- infoData.gender == 1 -->
          <img
            class="sex"
            v-else-if="DetailInfo.gender == 1"
            src="@/assets/shi/boy.png"
            alt
          />
          <span v-else>--</span>
        </div>
        <div class="infor sex" v-if="DetailInfo.age != 0">
          年龄
          <span>{{ DetailInfo.age }}岁</span>
        </div>
        <div class="infor sex" v-if="DetailInfo.age == 0">
          年龄
          <span>--</span>
        </div>
        <div
          class="infor mouth"
          v-if="PraiseData.level != 0 && PraiseData.level"
        >
          <p>带货口碑</p>
          <div class="info_item-right">
            <el-rate
              v-model="scareValue"
              disabled
              :colors="rateColor"
              score-template="{value}"
            ></el-rate>
            <span
              :style="{
                color:
                  PraiseData.level == 1
                    ? '#ea4759'
                    : PraiseData.level == 2
                    ? '#fd7f2c'
                    : '#4f5058',
              }"
              >{{ scareValue }}</span
            >

            <span v-if="PraiseData.level == 1" style="color: #ea4759">高</span>
            <span v-else-if="PraiseData.level == 2" style="color: #fd7f2c"
              >中</span
            >
            <span v-else style="color: #4f5058">低</span>
            <img
              class="num-img"
              src="@/assets/shi/k-line.png"
              @click="
                changeList(true);
                showMouthEchart = true;
              "
            />
          </div>
        </div>
        <div class="infor in-num">
          粉丝总数
          <span>{{ format_num(DetailInfo.totalFans) }}</span>
          <img
            class="num-img"
            src="@/assets/shi/k-line.png"
            @click="
              showFansEchart = true;
              FansDays = '30天';
            "
          />
        </div>
        <div class="infor in-num">
          点赞总数
          <span>{{ format_num(DetailInfo.totalFavorite) }}</span>
          <img
            class="num-img"
            src="@/assets/shi/k-line.png"
            @click="
              showFabulousEchart = true;
              FabulousDays = '30天';
            "
          />
        </div>
      </div>
      <div class="talentCompare" v-if="taentNewData.length != 0">
        <div class="top">
          <div>
            直播间对比
            <p>{{ num }}/5</p>
          </div>
          <span @click="empty()">清空</span>
        </div>
        <div class="img_center">
          <div class="img_box"></div>
          <div class="img_box"></div>
          <div class="img_box"></div>
          <div class="img_box"></div>
          <div class="img_box"></div>
        </div>
        <div class="img_center_box">
          <div
            class="img_box"
            v-for="(item, index) in taentNewData"
            :key="index"
            @mouseover="mouseOver(item, index)"
            @mouseleave="mouseleave()"
          >
            <img :src="item.roomLogo" alt v-errorImg:live />
            <img
              src="../../../../assets/li/delete_talent.png"
              alt
              class="delete_talent"
              v-if="isShowImg == item.authorId"
              @click="deleteTalent(item.roomId)"
            />
          </div>
        </div>
        <div class="button_box">
          <button v-if="taentNewData.length < 2">确认对比</button>
          <button
            class="button_affirm"
            @click="comparison()"
            v-if="taentNewData.length >= 2 && !showButton"
          >
            确认对比
          </button>
          <div
            class="confirmBtn boxShow"
            v-if="showButton && taentNewData.length >= 2"
          >
            <div
              v-loading="showLoading1"
              class="showLoading1"
              element-loading-spinner="el-icon-loading"
            ></div>
            <div
              class="boxShow_text"
              style="position: relative; left: 24px; text-align: left"
            >
              对比中
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧数据栏 -->
    <div class="boxright">
      <div class="top-top"></div>
      <div class="tabbtn">
        <button @click="changeBg(1)" :class="{ showClass: showClass == 1 }">
          直播数据分析
        </button>

        <button @click="changeBg(2)" :class="{ showClass: showClass == 2 }">
          直播商品分析
        </button>

        <button @click="changeBg(3)" :class="{ showClass: showClass == 3 }">
          直播观众分析
        </button>
      </div>
      <div
        class="fillet"
        style="
          padding: 20px 0 3px 0;
          box-sizing: border-box;
          height: calc(100% - 50px);
        "
      >
        <div class="main fillet" v-if="!isBoxLoading" id="mainBox">
          <div class="main_box" v-if="vipRootObj[6][34].owner">
            <!-- 带货数据 -->
            <div class="mood" v-if="InfoData != null">
              <p class="slide">带货数据</p>
              <div class="moodbox" id="mb2" v-if="Introduction.isShop != 0">
                <p>
                  {{ format_num(InfoData.liveSale) }}
                  <span>本场销售额</span>
                </p>
                <p>
                  {{ format_num(InfoData.liveVolume) }}
                  <span>本场销量</span>
                </p>
                <div class="border bor1"></div>
                <p>
                  {{ format_num(InfoData.livePro) }}
                  <span>直播商品数</span>
                </p>
                <p v-if="InfoData.clickCount != '--'">
                  {{ format_num(InfoData.clickCount) }}
                  <span>点击量</span>
                </p>
                <p v-if="InfoData.clickCount == '--'">
                  {{ InfoData.clickCount }}
                  <span>点击量</span>
                </p>

                <div class="border bor2"></div>
                <p>
                  {{ format_num(InfoData.avgLook) }}
                  <span>UV价值</span>
                </p>
                <div class="border bor3"></div>
                <p v-if="InfoData.conversionRate != '--'">
                  {{ InfoData.conversionRate }}
                  <span>转化率</span>
                </p>
                <p v-if="InfoData.conversionRate == '--'">
                  {{ InfoData.conversionRate }}
                  <span>转化率</span>
                </p>
                <div class="border bor4"></div>

                <p class="mbfan">
                  {{ format_num(InfoData.avgPrice) }}
                  <span>客单价</span>
                </p>
                <p class="mbfans" v-if="InfoData.priceRange">
                  {{ InfoData.priceRange }}
                  <span>直播商品价格区间</span>
                </p>
                <p class="mbfans" v-if="!InfoData.priceRange">
                  --
                  <span>直播商品价格区间</span>
                </p>
              </div>
              <div class="moodbox" v-else>
                <p>
                  --
                  <!-- {{ InfoData.liveSale? format_num(InfoData.liveSale): '--'}} -->
                  <span>本场销售额</span>
                </p>
                <p>
                  --
                  <!-- {{ InfoData.liveVolume? format_num(InfoData.liveVolume): '--' }} -->
                  <span>本场销量</span>
                </p>
                <div class="border bor1"></div>
                <p>
                  --
                  <!-- {{ InfoData.livePro? format_num(InfoData.livePro): '--' }} -->
                  <span>直播商品数</span>
                </p>
                <p>
                  {{
                    InfoData.clickCount == "--"
                      ? "--"
                      : format_num(InfoData.clickCount)
                  }}
                  <span>点击量</span>
                </p>

                <div class="border bor2"></div>
                <p>
                  --
                  <!-- {{InfoData.clickCount? format_num(InfoData.clickCount): '--'}} -->
                  <span>UV价值</span>
                </p>
                <div class="border bor3"></div>
                <p v-if="InfoData.conversionRate != '--'">
                  {{ InfoData.conversionRate }}%
                  <span>转化率</span>
                </p>
                <p v-if="InfoData.conversionRate == '--'">
                  {{ InfoData.conversionRate }}
                  <span>转化率</span>
                </p>
                <div class="border bor4"></div>

                <p class="mbfan">
                  --
                  <!-- {{ InfoData.avgPrice?format_num(InfoData.avgPrice):'--' }} -->
                  <span>客单价</span>
                </p>
                <p class="mbfans" v-if="InfoData.priceRange">
                  --
                  <span>直播商品价格区间</span>
                </p>
                <p class="mbfans" v-if="!InfoData.priceRange">
                  --
                  <span>直播商品价格区间</span>
                </p>
              </div>
            </div>
            <!-- 直播数据分析 -->
            <div class="bgdata" id="bgdata">
              <!-- 人气数值 -->
              <div class="mood" v-if="InfoData != null">
                <p class="slide">人气数据</p>
                <div class="moodbox" id="mb3">
                  <p>
                    {{ format_num(InfoData.lookPeople) }}
                    <span>累计观看人次</span>
                  </p>
                  <p>
                    {{ format_num(InfoData.lookPeak) }}
                    <span>观看人数峰值</span>
                  </p>
                  <div class="border bor1"></div>
                  <p>
                    {{ format_num(InfoData.avgonLinePeople) }}
                    <span>平均在线人数</span>
                  </p>
                  <p>
                    {{ InfoData.avgLookTime }}
                    <span>人均看播时长</span>
                  </p>
                  <div class="border bor2"></div>
                  <p>
                    {{ format_num(InfoData.favorite) }}
                    <span>点赞数</span>
                  </p>
                  <div class="border bor3"></div>
                  <p>
                    {{ InfoData.liveFanRate }}%
                    <span>转粉率</span>
                  </p>
                  <div class="border bor4"></div>
                  <p class="mbfan">
                    {{ format_num(InfoData.liveFanCount) }}
                    <span>新增粉丝</span>
                  </p>
                  <p class="mbfans">
                    {{ format_num(InfoData.fansClubPeopleNum) }}
                    <span>粉丝团新增人数</span>
                  </p>
                </div>
              </div>
              <!-- 数据趋势 -->
              <div class="trend">
                <p class="slide">数据趋势</p>
                <div>
                  <div class="check">
                    <span>互动指标</span>
                    <el-checkbox-group
                      v-model="interactive"
                      :min="1"
                      @change="interActive"
                    >
                      <el-checkbox
                        v-for="(value, key) in cities"
                        :label="value"
                        :key="key"
                        >{{ value }}</el-checkbox
                      >
                    </el-checkbox-group>
                  </div>
                  <div class="check">
                    <span>观看指标</span>
                    <el-checkbox-group
                      v-model="look_indicators"
                      :min="1"
                      @change="lookIndicators"
                    >
                      <el-checkbox
                        v-for="city in cities1"
                        :label="city"
                        :key="city"
                        >{{ city }}</el-checkbox
                      >
                    </el-checkbox-group>
                  </div>
                  <div class="check">
                    <span>交易指标</span>
                    <el-checkbox-group
                      v-model="deal_indicators"
                      :min="1"
                      @change="dealIndicators"
                    >
                      <el-checkbox
                        v-for="city in cities2"
                        :label="city"
                        :key="city"
                        >{{ city }}</el-checkbox
                      >
                    </el-checkbox-group>
                  </div>
                </div>

                <!-- v-if="active_name == '5' -->
                <div
                  style="height: 484px; width: 100%"
                  v-if="xData01.length != 0"
                >
                  <liveLineChart
                    v-if="xData01.length != 0"
                    :xData="xData01"
                    :xIcons="xIcons"
                    :series1="y1Data01"
                    :series2="y2Data01"
                    :series3="y3Data01"
                    :name1="name"
                    :name2="name1"
                    :name3="name2"
                  />
                </div>

                <!-- loading -->
                <div
                  v-loading="loading"
                  v-if="loading"
                  class="loading"
                  style="height: 484px"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                ></div>
                <!-- 无带货 -->
                <div
                  class="empty addTop"
                  v-show="xData01.length == 0 && !loading"
                >
                  <img src="@/assets/liu/zw.png" />
                  <p>暂无数据</p>
                </div>
              </div>
            </div>
            <div class="viewerbox viewerbox01" id="viewerbox">
              <div class="vbleft" v-if="Introduction" style="height: 360px">
                <p class="slide">直播转化</p>
                <LiveConversion v-if="Introduction&&Introduction.isShop" :InfoData="InfoData"/>
                <div class="zanwu" v-if="Introduction&&!Introduction.isShop">
                  <img src="@/assets/shi/zanwushuju.png" />
                  <p>本场直播间未带货</p>
                </div>
              </div>
              <!-- <div class="vbright">
                <p class="slide">观众来源实时分布</p>
                <BigPie :valueData="fansDiYu" v-if="fansDiYu.length != 0" />
                <div class="empty addTop" v-show="fansDiYu.length == 0">
                  <img src="@/assets/liu/zw.png" />
                  <p>暂无数据</p>
                </div>
              </div> -->
            </div>
            <!-- 直播商品分析 -->
            <div class="bggoods" id="bggoods">
              <p class="slide">商品列表</p>
              <!-- 商品类目 -->
              <div v-if="proKindList.length != 0">
                <radioGroupWithNum
                  :radio_values="proKindList"
                  v-model="proKind"
                  title="商品类目"
                  class="mt_10"
                />
              </div>
              <dl v-if="proKindList.length != 0">
                <dt>合作小店</dt>
                <dd
                  ref="ovBox"
                  :class="[{ overstep: isOverstep }, { is_unfold: isUnfold2 }]"
                >
                  <div class="cg_items" ref="ovChild">
                    <span
                      v-for="(item, idx) in shopKindList"
                      :key="idx + 'cdi'"
                      :class="{ active: item.name == shopKind }"
                      @click="getCondition2(item)"
                      >{{ item.name }}</span
                    >
                    <i @click="unfoldFn2">{{ isUnfold2 ? "收起" : "展开" }}</i>
                  </div>
                </dd>
              </dl>
              <!-- 商品品牌 -->
              <div v-if="proKindList.length != 0 && brandList.length != 0">
                <radioGroupWithNum
                  :radio_values="brandList"
                  v-model="brand"
                  title="商品品牌"
                  class="mt_10"
                />
              </div>
              <!-- 搜索框 -->
              <div class="searchBox" v-if="proKindList.length != 0">
                <el-input
                  v-model="keyword"
                  placeholder="请输入商品关键词搜索"
                  @keyup.enter.native="toSearch"
                ></el-input>
                <div class="imgBox" @click="toSearch">
                  <!-- <img src="@/assets/wang/talentCompare/search.png" /> -->
                </div>
              </div>
              <!-- 统计表 -->
              <div class="census" v-if="proKindList.length != 0">
                <div class="fillet">
                  <p>商品(件)</p>
                  <span>{{ format_num(count) }}</span>
                </div>
                <div class="fillet">
                  <p>累计销量</p>
                  <span>{{ format_num(volume) }}</span>
                </div>
                <div class="fillet">
                  <p>累计销售额</p>
                  <span>{{ format_num(amount) }}</span>
                </div>
              </div>
              <!-- 商品表格 -->
              <div class="last_list" v-if="proKindList.length != 0">
                <section ref="capture">
                  <table class="table" ref="tableEl">
                    <thead>
                      <tr ref="th_tr_El">
                        <th>商品</th>
                        <th>上下架时间</th>
                        <!-- 直播价 -->
                        <th
                          v-if="orderType == 2 && sort == 'livePrice'"
                          class="hands"
                          @click="sort_fun(true, 'livePrice')"
                        >
                          直播价
                          <img
                            src="@/assets/meng/down_up.png"
                            v-if="orderType == 2 && sort == 'livePrice'"
                          />
                          <img src="@/assets/meng/no_down_up.png" v-else />
                        </th>
                        <th
                          v-else
                          class="hands"
                          @click="sort_fun(false, 'livePrice')"
                        >
                          直播价
                          <img
                            src="@/assets/meng/up_down.png"
                            v-if="orderType == 1 && sort == 'livePrice'"
                          />
                          <img src="@/assets/meng/no_down_up.png" v-else />
                        </th>
                        <!-- 销量 -->
                        <th
                          v-if="orderType == 2 && sort == 'Volume'"
                          class="hands"
                          @click="sort_fun(true, 'Volume')"
                        >
                          销量
                          <img
                            src="@/assets/meng/down_up.png"
                            v-if="orderType == 2 && sort == 'Volume'"
                          />
                          <img src="@/assets/meng/no_down_up.png" v-else />
                        </th>
                        <th
                          v-else
                          class="hands"
                          @click="sort_fun(false, 'Volume')"
                        >
                          销量
                          <img
                            src="@/assets/meng/up_down.png"
                            v-if="orderType == 1 && sort == 'Volume'"
                          />
                          <img src="@/assets/meng/no_down_up.png" v-else />
                        </th>
                        <!-- 销售额 -->
                        <th
                          v-if="orderType == 2 && sort == 'Amount'"
                          class="hands"
                          @click="sort_fun(true, 'Amount')"
                        >
                          销售额
                          <img
                            src="@/assets/meng/down_up.png"
                            v-if="orderType == 2 && sort == 'Amount'"
                          />
                          <img src="@/assets/meng/no_down_up.png" v-else />
                        </th>
                        <th
                          v-else
                          class="hands"
                          @click="sort_fun(false, 'Amount')"
                        >
                          销售额
                          <img
                            src="@/assets/meng/up_down.png"
                            v-if="orderType == 1 && sort == 'Amount'"
                          />
                          <img src="@/assets/meng/no_down_up.png" v-else />
                        </th>
                        <!-- <th>讲解次数</th>
                        <th>累计讲解时长</th>-->
                        <th>操作</th>
                      </tr>
                    </thead>
                    <tbody v-if="proList && !loading1">
                      <tr v-for="(item, index) in proList" :key="'a' + index">
                        <td style="width: 366px">
                          <div class="rightBox">
                            <div class="picture">
                              <img
                                :src="item.proLogo"
                                @click="togoods(item.proId)"
                              />
                            </div>
                            <div class="info">
                              <div
                                class="info_top hands"
                                @click="togoods(item.proId)"
                              >
                                <div
                                  class="goods_iden"
                                  v-if="item.proSign == 1"
                                >
                                  自有
                                </div>
                                <div class="goods_iden" v-else-if="item.proSign == 2">广场</div>
                                <div class="goods_iden" v-else>自有&广场</div>
                                {{ item.proTitle }}
                              </div>
                            </div>
                          </div>
                        </td>
                        <td style="width: ">
                          {{ timestamp(item.addedUnix, "M-D h:m") }}
                          <span
                            style="display: block"
                            v-if="item.offUnix != 0"
                            >{{ timestamp(item.offUnix, "M-D h:m") }}</span
                          >
                          <span style="display: block" v-if="item.offUnix == 0"
                            >--</span
                          >
                        </td>
                        <td v-if="item.livePrice == item.maxPrice">
                          ￥{{ item.livePrice }}
                        </td>
                        <td
                          v-if="
                            item.livePrice != item.maxPrice &&
                            item.maxPrice != 0
                          "
                        >
                          ￥{{ item.livePrice }} - {{ item.maxPrice }}
                        </td>
                        <td
                          v-if="
                            item.livePrice != item.maxPrice &&
                            item.maxPrice == 0
                          "
                        >
                          ￥{{ item.livePrice }}
                        </td>
                        <td>{{ format_num(item.volume) }}</td>
                        <td>{{ format_num(item.amount) }}</td>
                        <!-- <td>{{ format_num(30) }}</td>
                        <td>10分10秒</td>-->
                        <td>
                          <span
                            class="fillet hands hoverfill"
                            @click="
                              GetLiveRoomsByProId(item);
                              showHotRoom = true;
                            "
                            >直播数据</span
                          >
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </section>
              </div>
              <div v-if="count < 0" class="Popupline">我是有底线的~</div>
              <div class="pageBox" v-if="proList.length != 0">
                <el-pagination
                  background
                  layout="prev, pager, next, jumper"
                  :total="count"
                  :page-size="8"
                  :current-page="page"
                  @current-change="changePage"
                  :hide-on-single-page="true"
                ></el-pagination>
              </div>
              <div
                v-loading="loading1"
                v-if="loading1"
                class="loading"
                element-loading-spinner="el-icon-loading"
              ></div>
              <div
                class="empty addTop"
                v-show="proList.length == 0 && !loading1"
              >
                <img src="@/assets/liu/zw.png" />
                <p>暂无数据</p>
              </div>
            </div>
            <!-- 直播观众分析 -->
            <div class="viewerbox" id="viewerbox">
              <div class="vbleft">
                <p class="slide">观众性别分析</p>
                <div class="vbvbleft" v-if="pieGenderData.length != 0">
                  <div class="second_hua">
                    <GenderSpread
                      :pieData="pieGenderData"
                      v-if="pieGenderData"
                    />
                    <p v-else>性别占比暂无数据</p>
                  </div>
                  <div class="second_echart">
                    <p class="slide">观众来源分析</p>
                    <BigPie :valueData="fansDiYu" v-if="fansDiYu.length != 0" />
                    <div class="empty addTop" v-show="fansDiYu.length == 0">
                      <img src="@/assets/liu/zw.png" />
                      <p>暂无数据</p>
                    </div>
                  </div>
                </div>
                <div
                  class="empty addTop"
                  v-if="pieGenderData.length == 0 && fansxData.length == 0"
                >
                  <img src="@/assets/liu/zw.png" />
                  <p>暂无数据</p>
                </div>
              </div>
              <div class="vbright" style="height: 360px">
                <p class="slide">观众年龄分析</p>
                <BarChart
                  v-if="fansxData.length != 0"
                  :pieData="fansxData"
                  pieName="粉丝年龄分布"
                  style="margin-top: 20px"
                />
                <div class="empty addTop" v-else>
                  <img src="@/assets/liu/zw.png" />
                  <p>暂无数据</p>
                </div>
              </div>
            </div>
          </div>
          <div class="vip_pay_box" v-else>
            <img
              :src="$global.staticUrl + 'image/egImg/goodsJurisdiction01.png'"
            />
            <div class="vip_pay_warp">
              <payVip :lowestVipNum="vipRootObj[6][34].ownerMinLevel" />
            </div>
          </div>
        </div>
        <div
          v-if="isBoxLoading"
          style="margin-top: 60px; margin-bottom: 100px"
          v-loading="isBoxLoading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        ></div>
      </div>
    </div>

    <!-- 口碑趋势 -->
    <el-dialog
      :visible.sync="showMouthEchart"
      width="740px"
      top="22.5vh"
      class="dialogLoginBox"
    >
      <div class="popup_wrap">
        <div class="popup_wrap-title">
          <div class="title">口碑趋势</div>
          <div class="switch">
            <div
              class="switch-btn"
              :class="{ native: changeBoard }"
              @click="changeList(true)"
            >
              日榜
            </div>
            <div
              class="switch-btn"
              :class="{ native: !changeBoard }"
              @click="changeList(false)"
            >
              月榜
            </div>
          </div>
        </div>
        <div class="popup_wrap-explain">
          <el-rate
            v-model="scareValue"
            disabled
            :colors="rateColor"
            score-template="{value}"
          ></el-rate>
          <span
            :style="{
              color:
                PraiseData.level == 1
                  ? '#ea4759'
                  : PraiseData.level == 2
                  ? '#fd7f2c'
                  : '#4f5058',
            }"
            >{{ scareValue }}</span
          >

          <span v-if="PraiseData.level == 1" style="color: #ea4759">高</span>
          <span v-else-if="PraiseData.level == 2" style="color: #fd7f2c"
            >中</span
          >
          <span v-else style="color: #4f5058">低</span>
          <div class="text">
            带货口碑排名打败
            <span class="num"
              >{{ PraiseData.percentage ? PraiseData.percentage : "--" }}%</span
            >同行
          </div>
        </div>
        <div class="popup_wrap-echart">
          <KChart :xData="xData" :series1="PraiseData.value" name1="口碑趋势" />
        </div>
      </div>
    </el-dialog>

    <!-- 粉丝趋势 -->
    <el-dialog
      :visible.sync="showFansEchart"
      width="740px"
      top="22.5vh"
      class="dialogLoginBox"
    >
      <div class="popup_wrap">
        <div class="popup_wrap-title">
          <div class="title">粉丝趋势</div>
          <div class="time_slot" id="STimeSlot">
            <radio_group01
              :radio_values="['近7天', '30天', '90天']"
              v-model="FansDays"
              class="tab01"
            />
            <div class="optionsBox">
              <el-date-picker
                class="long_time"
                v-model="FansliveTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                prefix-icon="el-icon-arrow-down"
                unlink-panels
                :clearable="false"
                :picker-options="FansStartEnd"
                value-format="yyyy-MM-dd"
                @change="FansPicker"
              ></el-date-picker>
            </div>
          </div>
        </div>
        <div class="popup_wrap-echart m-t30">
          <KChart
            :xData="FansEchart.xData"
            :series1="FansEchart.yData1"
            :series2="FansEchart.yData2"
            name1="增量"
            name2="总量"
            v-if="showFansEchart"
          />
        </div>
      </div>
    </el-dialog>

    <!-- 点赞趋势 -->
    <el-dialog
      :visible.sync="showFabulousEchart"
      width="740px"
      top="22.5vh"
      class="dialogLoginBox"
    >
      <div class="popup_wrap">
        <div class="popup_wrap-title">
          <div class="title">点赞趋势</div>
          <div class="time_slot" id="STimeSlot">
            <radio_group01
              :radio_values="['近7天', '30天', '90天']"
              v-model="FabulousDays"
              class="tab01"
            />
            <div class="optionsBox">
              <el-date-picker
                class="long_time"
                v-model="FabulousliveTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                prefix-icon="el-icon-arrow-down"
                unlink-panels
                :clearable="false"
                :picker-options="FabulousStartEnd"
                value-format="yyyy-MM-dd"
                @change="FabulousPicker"
              ></el-date-picker>
            </div>
          </div>
        </div>
        <div class="popup_wrap-echart m-t30">
          <KChart
            :xData="FabulousEchart.xData"
            :series1="FabulousEchart.yData1"
            :series2="FabulousEchart.yData2"
            name1="增量"
            name2="总量"
            v-if="showFabulousEchart"
          />
        </div>
      </div>
    </el-dialog>
    <!-- 直播间弹窗 -->
    <el-dialog
      :visible.sync="showHotRoom"
      top="10%"
      class="dialog01"
      custom-class="buyDialog"
      width="1100px"
    >
      <div class="hotRoomBox" v-if="liveBoxData">
        <!-- 商品直播数据 -->
        <div class="hbnumbox">
          <p class="slide">商品直播数据</p>
          <div class="hbnum">
            <img :src="liveBoxData.proLogo" alt />
            <p>
              {{ liveBoxData.proTitle }}
              <span>店铺：{{ liveBoxData.shopTitle }}</span>
            </p>
          </div>
          <div class="datas" v-if="liveBoxData">
            <p style="padding-left: 50px">
              {{ liveBoxData.livePrice }}
              <span>最低价(元)</span>
            </p>
            <p>
              {{ liveBoxData.maxPrice }}
              <span>最高价(元)</span>
            </p>
            <div class="border bor1"></div>
            <p>
              {{ format_num(liveBoxData.volume) }}
              <span>销量</span>
            </p>
            <p>
              {{ format_num(liveBoxData.amount) }}
              <span>销售额</span>
            </p>
            <!-- <p><span>讲解次数</span></p>
            <p style="padding-right: 0;"><span>讲解时长</span></p>-->
          </div>
        </div>
      </div>
      <!-- 直播销量趋势图 -->
      <div class="trends" style="height: 390px">
        <p class="slide" style="margin-bottom: 30px">直播销量趋势图</p>
        <div style="height: 320px" v-if="vtrend.length != 0">
          <div
            class="switch"
            style="
              position: absolute;
              top: 16px !important;
              left: 81% !important;
            "
          >
            <div
              class="switch-btn"
              :class="{ native: showJgXl }"
              @click="changeValue(true)"
            >
              销量
            </div>
            <div
              class="switch-btn"
              :class="{ native: !showJgXl }"
              @click="changeValue(false)"
            >
              价格
            </div>
          </div>
          <livetabchart
            :xData="tspans"
            :series1="vtrend"
            :series2="ptrend"
            :name1="showJgXl ? '销量' : '价格'"
            v-if="tspans && !loading2"
          />
        </div>
        <div
          v-loading="loading2"
          v-if="loading2"
          class="loading"
          element-loading-spinner="el-icon-loading"
        ></div>
        <div class="empty addTop" v-if="tspans.length == 0 && !loading2">
          <img src="@/assets/liu/zw.png" />
          <p>暂无数据</p>
        </div>
      </div>
      <!-- 讲解列表 -->
      <!-- <p class="slide">讲解列表</p>
        <div v-loading="roomLoading"
             element-loading-text="拼命加载中"
             element-loading-spinner="el-icon-loading">
        <table class="table">
          <thead>
            <tr>
              <th style="padding-left:30px">讲解时间</th>
              <th>讲解时长</th>
              <th>价格</th>
              <th>销量</th>
            </tr>
          </thead>
          <tbody>
            <tr style="text-align: center;font-size:15px;color:#222;">
              <td style="padding-left:0;">07-01 18:30</td>
              <td>10分10秒</td>
              <td>{{liveBoxData.livePrice}}</td>
              <td>{{format_num(liveBoxData.volume)}}</td>
            </tr>
          </tbody>
      </table>-->
      <!-- <div v-if="count <= 5"
      class="Popupline">我是有底线的~</div>-->
      <!-- <div class="pageBoxs"
             v-if="count > 5">
          <el-pagination background
                         layout="prev, pager, next, jumper"
                         :total="count"
                         :page-size="5"
                         :current-page="page01"
                         @current-change="changePages"
                         :hide-on-single-page="true"></el-pagination>
      </div>-->
      <!-- </div> -->
      <!-- </div> -->
    </el-dialog>
    <!-- 对比详情 -->
    <div class="box">
      <el-dialog
        :visible.sync="talentDetails"
        :show-close="true"
        v-if="talentDetails"
      >
        <div class="topicDetailsBox">
          <liveRoomC :inputName="item_id" />
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import LiveConversion from "../component/LiveConversion.vue"
import GenderSpread from "../../workbench/GenderSpread.vue";
import BarChart from "../../talent/tdetails/NewComponents/BarChart.vue";
import BigPie from "@/pages/wang/talent/tdetails/component/BigPie";
import KChart from "@/pages/wang/talent/tdetails/NewComponents/KChart.vue";
import radioGroupWithNum from "@/component/radioGroupWithNum.vue";
import liveLineChart from "../component/dataChart.vue";
import livetabchart from "../component/livetabchart.vue";
import liveRoomC from "./liveRoomC.vue";
import $ from "jquery";
export default {
  data() {
    const cityOptions = { 1: "本场涨粉人数", 3: "粉丝团新增", 5: "点赞次数" };
    const cityOptions1 = ["实时在线人数", "实时进场人数", "实时离场人数"];
    const cityOptions2 = ["直播销售额", "直播销量"];
    return {
      proId: null,
      interactive: [], //互动指标
      int_dis: true,
      look_indicators: [], //观看指标
      look_dis: true,
      deal_indicators: ["直播销售额"], //交易指标
      deal_dis: false,
      //  checkedCities: ,
      cities: cityOptions,
      cities1: cityOptions1,
      cities2: cityOptions2,
      scareValue: 4, //口碑评分
      showMouthEchart: false, //口碑趋势
      showFansEchart: false, //粉丝总数
      showFabulousEchart: false, //点赞总数
      changeBoard: true,
      Introduction: null, //直播详情简介
      DetailInfo: null, // 直播达人信息
      InfoData: null, //人气数值
      keyword: "",
      dataOverView: {},
      pieGenderData: [],
      fansxData: [],
      fansDiYu: [],
      fansDiYu: [],
      proList: [], //商品列表
      showHotRoom: false, //直播数据弹窗
      FansDays: "30天", //粉丝趋势
      FabulousDays: "30天", //点赞趋势
      FansliveTime: "", //粉丝弹窗选择时间
      FabulousliveTime: "", //点赞弹窗选择时间
      FansStartEnd: "",
      FabulousStartEnd: "",
      //左侧echarts弹窗数据
      FansEchart: {
        xData: [],
        yData1: [],
        yData2: [],
      },

      FabulousEchart: {
        xData: [],
        yData1: [],
        yData2: [],
      },
      PraiseData: {},
      count: 0, //分页页数
      volume: 0, //累计销量
      amount: 0, //累计销售额
      page01: 1,
      page: 1,
      acts: [1, -1, -1], //tab 按钮
      res01: null,
      proKindList: [], //商品类目
      proKind: "全部",
      shopKindList: [], //小店分类
      shopKind: "全部",
      brandList: [], //商品品牌
      brand: "全部",
      liveBoxData: null, //直播间弹框单项数据
      name: "直播销售额",
      name1: "",
      name2: "",
      xData01: [],
      xIcons: [],
      y1Data01: [],
      y2Data01: [],
      y3Data01: [],
      // type: [1],
      rateColor: ["#ea4759", "#ea4759", "#ea4759"],
      romid: "", //获取id
      /* 弹窗中的折线图 */
      vtrend: [],
      ptrend: [],
      tspans: [],
      showJgXl: true,
      shopValue: 0,
      isOverstep: false, //是否超出（初始化）
      isUnfold: false, //是否展示
      isUnfold2: false,
      showClass: 1,
      isBoxLoading: true, //判断权限之前先判断是否请求过接口，否则会出现会员弹框闪一下的情况
      loading1: false,
      loading2: false,
      sort: "Amount",
      orderType: 2,
      isClickTab: false, //是否是点击tab切换
      // sortType:1,
      isFristPushX: true, //是否第一次pushX轴数据
      xData: [],
      type: ["7"], //折线图,
      taentNewData: [],
      showButton: false,
      taentNewDataLength: "",
      isShowImg: "",
      talentDetails: false,
      item_id: "",
      surplusCount: "",
      showLoading1: false,
      loading: false,
      vipRootObj: this.$store.state.userRoot, //会员权限对象
      once: true,
      cancel01: null,


      y1_data6: null,
      y2_data7: null,
      y2_data8: null,
      y2_data9: null,
      x_data6: null,
      x_data66: null,
    };
  },
  components: {
    GenderSpread,
    BarChart,
    BigPie,
    KChart,
    radioGroupWithNum,
    liveLineChart,
    livetabchart,
    liveRoomC,
    LiveConversion
  },
  computed: {
    changeData() {
      const { proKind, shopKind, brand } = this;
      return {
        proKind,
        shopKind,
        brand,
      };
    },
  },
  watch: {
    // 粉丝总数
    FansDays: function (newVal, oldVal) {
      this.FansEchart.yData1 = [];
      this.FansEchart.yData2 = [];
      this.FansEchart.xData = [];
      this.getFansEchart();
    },
    // 点赞总数
    FabulousDays: function (newVal, oldVal) {
      this.FabulousEchart.yData1 = [];
      this.FabulousEchart.yData2 = [];
      this.FabulousEchart.xData = [];
      this.getFabulousEchart();
    },
    changeData() {
      this.proList = [];
      this.page = 1;
      this.getProList();
    },
    // 搜索
    keyword: function (newVal, oldVal) {
      if (newVal == "") {
        this.proList = [];
        this.page = 1;
        this.getProList();
      }
    },
    taentNewData() {
      this.taentNewDataLength = this.taentNewData.length;
    },
  },
  created() {
    this.get_data02();
    // this.getProList();
    if (JSON.parse(localStorage.getItem("liveDetails_Contrast")) == null) {
      localStorage.setItem("liveDetails_Contrast", JSON.stringify([]));
      this.taentNewData = JSON.parse(
        localStorage.getItem("liveDetails_Contrast")
      );
      this.num = this.taentNewData.length;
    }
  },
  mounted() {
    this.GetLiveIntroduction().then(() => {
      // this.GetAuthorDetailInfo(); //达人详情
      this.showChangeList(); //口碑评分
      this.getFansEchart(); //粉丝点赞
      this.getFabulousEchart(); //点赞总数
    }); //直播详情

    // 人气数值+带货数据
    this.GetLiveInfoData().then((code) => {
      if (code == 0) {
        if (this.vipRootObj[6][34].owner) {
          this.getCateList(); //合作小店+商品类目
          this.GetBrandByRoomId(); //品牌
          this.trend(); //折线图
          this.getFansPortrait(); //观众画像
          this.$el
            .querySelector("#mainBox")
            .addEventListener("scroll", this.handleScroll); // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
        }
      }
    });

    this.taentNewData = JSON.parse(
      localStorage.getItem("liveDetails_Contrast")
    );
    this.num = this.taentNewData.length;
  },
  methods: {

    // 从实时直播大厅复制过来的观众来源实时分布
    get_data02() {
      this.loading = true;
      this.response02 = null;
      let that = this;
      this.$axios({
        method: "get",
        url: "/api/live/GetLiveAttribute",
        params: {
          room_id: that.$route.params.id,
        },
      })
        .then((response) => {
          if (response.data.code == 0) {
            console.log("response.data",response.data)
            this.response02 = response.data.data;
            if (this.response02.avglooktime == '0+"') {
              this.response02.avglooktime = false;
            }
            if (response.data.data.sound_chart) {
              this.x_data011 = response.data.data.sound_chart.x;
              this.x_data01 = response.data.data.sound_chart.x.map(
                (element) => {
                  return this.timestamp(element, "h:m");
                }
              );
              this.y1_data01 = response.data.data.sound_chart.y2;
              this.y2_data01 = response.data.data.sound_chart.y1;
            }
            if (response.data.data.line_chart) {
              this.x_data02 = response.data.data.line_chart.x.map((element) => {
                return this.timestamp(element, "h:m");
              });
              this.y1_data02 = response.data.data.line_chart.y2;
              this.y2_data02 = response.data.data.line_chart.y1;
            }
            if (response.data.data.sound_people_chart) {
              this.x_data03 = response.data.data.sound_people_chart.x.map(
                (element) => {
                  return this.timestamp(element, "h:m");
                }
              );
              this.y1_data03 = response.data.data.sound_people_chart.y2;
              this.y2_data03 = response.data.data.sound_people_chart.y1;
            }
            if (response.data.data.fans_chart) {
              this.x_data04 = response.data.data.fans_chart.x.map((element) => {
                return this.timestamp(element, "h:m");
              });
              this.y1_data04 = response.data.data.fans_chart.y2;
              this.y2_data04 = response.data.data.fans_chart.y1;
            }
            if (response.data.data.sales_chart) {
              this.x_data055 = response.data.data.sales_chart.x;

              this.x_data05 = response.data.data.sales_chart.x.map(
                (element) => {
                  return this.timestamp(element, "h:m");
                }
              );
              this.y1_data05 = response.data.data.sales_chart.y2;
              this.y2_data05 = response.data.data.sales_chart.y1;
            }
            if (response.data.data.froms_chart) {
              this.x_data66 = response.data.data.froms_chart.x;
              this.x_data6 = response.data.data.froms_chart.x.map((ele) => {
                return this.timestamp(ele, "h:m");
              });
              this.y1_data6 = response.data.data.froms_chart.y_city;
              this.y2_data7 = response.data.data.froms_chart.y_fans;
              this.y2_data8 = response.data.data.froms_chart.y_video;
              this.y2_data9 = response.data.data.froms_chart.y_other;
            }
            if (response.data.data.fanstuan_chart) {
              this.fanstuan_chartxx = response.data.data.fanstuan_chart.x;

              this.fanstuan_chartx = response.data.data.fanstuan_chart.x.map(
                (ele) => {
                  return this.timestamp(ele, "h:m");
                }
              );
              this.fanstuan_charty = response.data.data.fanstuan_chart.y_fans;
              this.fanstuan_charty1 =
                response.data.data.fanstuan_chart.y_fanstuan;
            }
            if (response.data.data.flow_chart) {
              this.flow_chartxx = response.data.data.flow_chart.x;

              this.flow_chartx = response.data.data.flow_chart.x.map((ele) => {
                return this.timestamp(ele, "h:m");
              });

              if (!this.flow_chartx.length) {
                this.flow_chartx = false;
              }
              this.y_avglooktime = response.data.data.flow_chart.y_avglooktime;

              this.y_in = response.data.data.flow_chart.y_in;
              this.y_line = response.data.data.flow_chart.y_line;
            }
            this.loading = false;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 互动指标
    interActive(n) {
      // 当选择互动指标时取消其它指标的选中
      this.deal_indicators = [];
      this.look_indicators = [];

      this.xIcons = [];
      this.y1Data01 = [];
      this.y2Data01 = []; // this.this.data_x = [];   this.name = null;
      this.y3Data01 = [];
      this.name = null;
      this.name = n[0];
      this.name1 = null;
      this.name1 = n[1];
      this.name2 = null;
      this.name2 = n[2];
      this.type = [];
      n.map((item) => {
        if (item == "点赞次数") {
          this.type.push("1");
        } else if (item == "本场涨粉人数") {
          this.type.push("3");
        } else if (item == "粉丝团新增") {
          this.type.push("2");
        }
      });
      this.trend();
    },
    //观看指标
    lookIndicators(n) {
      // 当选择观看指标时取消其它指标的选中
      this.deal_indicators = [];
      this.interactive = [];
      
      this.xIcons = [];
      this.y1Data01 = [];
      this.y2Data01 = []; // this.this.data_x = [];
      this.y3Data01 = [];
      this.name = null;
      this.name = n[0];
      this.name1 = null;
      this.name1 = n[1];
      this.name2 = null;
      this.name2 = n[2];
      this.type = [];
      n.map((item) => {
        if (item == "实时在线人数") {
          this.type.push("8");
        } else if (item == "实时进场人数") {
          this.type.push("0");
        } else if (item == "实时离场人数") {
          this.type.push("10");
        }
      });
      this.trend();
    },
    // 交易指标
    dealIndicators(n){
      // 当选择交易指标时, 把其它两个指标取消选中,
      this.look_indicators = [];
      this.interactive = [];

      // this.xData01 = []
      this.xIcons = [];
      this.y1Data01 = [];
      this.y2Data01 = []; // this.this.data_x = [];
      this.y3Data01 = [];
      this.name = null;
      this.name = n[0];
      this.name1 = null;
      this.name1 = n[1];
      this.name2 = null;

      this.type = [];
      n.map((item) => {
        if (item == "直播销量") {
          this.type.push("6");
        } else if (item == "直播销售额") {
          this.type.push("7");
        }
      });
      this.trend();
    },
    // 获取--直播详情简介信息
    GetLiveIntroduction() {
      return new Promise((resolve, reject) => {
        this.romid = this.$route.params.id;
        this.$axios
          .get("/api/live/GetLiveIntroduction", {
            params: {
              roomId: this.$route.params.id,
            },
          })
          .then((res) => {
            resolve(res.data.code);
            if (res.data.code == 0) {
              this.Introduction = res.data.data;
              this.GetAuthorDetailInfo(this.Introduction.authorId);
              document.title =
                res.data.data.roomTitle +
                "-直播数据|商品|观众数据分析-掌上精选";
            }
          });
      });
    },
    // 获取--直播达人详情
    GetAuthorDetailInfo(AuthorId) {
      this.$axios
        .get("/api/author/GetAuthorDetailInfo", {
          params: {
            AuthorId: AuthorId,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.DetailInfo = res.data.data;
          }
        });
    },
    /* 监听页面 */
    handleScroll(e) {
      let main = this.$el.querySelector("#mainBox"),
        box1 = this.$el.querySelector("#bgdata"),
        box2 = this.$el.querySelector("#bggoods"),
        box3 = this.$el.querySelector("#viewerbox");
      if (!box1) return;
      let box1TopVal = box1.offsetTop;
      let box2TopVal = box2.offsetTop;
      let box3TopVal = box3.offsetTop;
      let scrollTop = e.target.scrollTop;
      if (!this.isClickTab) {
        if (scrollTop <= box1.offsetHeight - 20) {
          this.showClass = 1;
        } else if (scrollTop <= box3TopVal - 80) {
          this.showClass = 2;
        } else {
          this.showClass = 3;
        }
      } else {
        this.isClickTab = false;
      }
    },
    changeBg(idx) {
      let main = this.$el.querySelector("#mainBox"),
        box1 = this.$el.querySelector("#bgdata"),
        box2 = this.$el.querySelector("#bggoods"),
        box3 = this.$el.querySelector("#viewerbox");
      if (!box1) return;
      let box1TopVal = box1.offsetTop;
      let box2TopVal = box2.offsetTop;
      let box3TopVal = box3.offsetTop;
      let topVal = idx == 1 ? 0 : idx == 2 ? box2TopVal - 20 : box3TopVal;
      main.scrollTo(0, topVal);
      this.showClass = idx;
      this.isClickTab = true;
    },
    getCondition(itemObj) {
      //商品类目
      this.proKind = itemObj.name;
      this.kindValue = itemObj.value;
    },
    getCondition2(itemObj) {
      //点击达人行业选项
      this.shopKind = itemObj.name;
      this.shopValue = itemObj.value;
    },
    getCondition3(itemObj) {
      //点击达人行业选项
      this.shop = itemObj.name;
      this.shopValue = itemObj.value;
    },
    unfoldFn() {
      this.isUnfold = !this.isUnfold;
    },
    unfoldFn2() {
      this.isUnfold2 = !this.isUnfold2;
    },
    unfoldFn3() {
      this.isUnfold3 = !this.isUnfold3;
    },
    setCondition() {
      this.$nextTick(() => {
        let box = this.$refs.ovBox;
        if (!box) return;
        let childBox = this.$refs.ovChild;
        let boxHeight = box.offsetHeight;
        let childBoxHeight = childBox.offsetHeight;
        if (boxHeight < childBoxHeight) {
          this.isOverstep = true;
        }
      });
    },
    // 搜索
    toSearch() {
      this.proList = [];
      this.page = 1;
      this.getProList();
    },
    // 排序
    sort_fun(parm01, parm02) {
      console.log(parm01, parm02);
      if (parm01) {
        this.orderType = 1;
      } else {
        this.orderType = 2;
      }
      this.sort = parm02;
      this.proList = [];
      this.page = 1;
      this.getProList();
    },
    FansPicker() {
      //粉丝总数
      this.FansDays = "";
      this.FansEchart.yData1 = [];
      this.FansEchart.yData2 = [];
      this.FansEchart.xData = [];
      this.getFansEchart();
    },
    FabulousPicker() {
      //点赞总数
      this.FabulousDays = "";
      this.FabulousEchart.yData1 = [];
      this.FabulousEchart.yData2 = [];
      this.FabulousEchart.xData = [];
      this.getFansEchart();
    },
    // 口碑评分
    showChangeList() {
      this.$axios
        .get("/api/Author/GetPublicPraiseTrend", {
          params: {
            authorId: this.Introduction.authorId,
            trendType: 1,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.xData = res.data.data.name;
            this.scareValue = res.data.data.publicPraise;
            this.PraiseData = res.data.data;
            this.scareValue = res.data.data.publicPraise;
            this.PraiseData = res.data.data;
            if (res.data.data.level == 1) {
              this.rateColor = ["#ea4759", "#ea4759", "#ea4759"];
            } else if (res.data.data.level == 2) {
              this.rateColor = ["#fd7f2c", "#fd7f2c", "#fd7f2c"];
            } else {
              this.rateColor = ["#4f5058", "#4f5058", "#4f5058"];
            }
          }
        });
    },
    // 口碑
    changeList(e) {
      this.PraiseData = [];
      this.xData = [];
      //if (this.changeBoard == e) return //防止一直点击同一个按钮一直请求数据
      this.changeBoard = e;
      this.$axios
        .get("/api/Author/GetPublicPraiseTrend", {
          params: {
            authorId: this.Introduction.authorId,
            trendType: e ? 1 : 2,
          },
        })
        .then((res) => {
          if (!e) {
            res.data.data.name.forEach((item, i) => {
              // res.data.data.name = []
              let arr = item.substring(0, 2) + "月";
              this.xData.push(arr);
            });
          } else {
            this.xData = res.data.data.name;
          }
          this.scareValue = res.data.data.publicPraise;
          this.PraiseData = res.data.data;
          if (res.data.data.level == 1) {
            //高ea4759
            this.rateColor = ["#ea4759", "#ea4759", "#ea4759"];
          } else if (res.data.data.level == 2) {
            //中fd7f2c
            this.rateColor = ["#fd7f2c", "#fd7f2c", "#fd7f2c"];
          } else {
            this.rateColor = ["#4f5058", "#4f5058", "#4f5058"];
          }
        });
    },
    changeValue(e) {
      this.tspans = [];
      this.vtrend = [];
      this.ptrend = [];
      //   if (this.showJgXl == e) return; //防止一直点击同一
      this.showJgXl = e;
      this.GetLiveVolPriByPro();
    },
    // 获取左侧粉丝图表数据
    getFansEchart() {
      switch (this.FansDays) {
        case "近7天":
          this.endDate1 = this.timestamp(Date.now() / 1000, "Y-M-D");
          this.startDate1 = this.timestamp(
            Date.now() / 1000 - 86400 * 6,
            "Y-M-D"
          );
          break;
        case "30天":
          this.endDate1 = this.timestamp(Date.now() / 1000, "Y-M-D");
          this.startDate1 = this.timestamp(
            Date.now() / 1000 - 86400 * 29,
            "Y-M-D"
          );
          break;
        case "90天":
          this.endDate1 = this.timestamp(Date.now() / 1000, "Y-M-D");
          this.startDate1 = this.timestamp(
            Date.now() / 1000 - 86400 * 89,
            "Y-M-D"
          );
          break;
        default:
          this.startDate1 = this.FansliveTime[0];
          this.endDate1 = this.FansliveTime[1];
          break;
      }
      this.FansliveTime = [this.startDate1, this.endDate1];
      this.$axios
        .get("/api/Author/GetFansFavoriteTrend", {
          params: {
            AuthorId: this.Introduction.authorId,
            trendType: 1,
            star_time: this.startDate1,
            end_time: this.endDate1,
          },
        })
        .then((res) => {
          let that = this;
          if (res.data.code == 0) {
            this.FansEchart.yData1 = res.data.data.datas1;
            this.FansEchart.yData2 = res.data.data.datas2;
            res.data.data.dates.forEach((item, index) => {
              that.FansEchart.xData.push(that.timestamp(item, "Y-M-D"));
              return that.FansEchart.xData;
            });
          }
        });
    },
    changezhe() {
      this.FabulousDays = "30天";
      this.showFabulousEchart = true;
      this.getFabulousEchart();
    },
    // 获取左侧点赞趋势图表数据
    getFabulousEchart() {
      switch (this.FabulousDays) {
        case "近7天":
          this.endDate2 = this.timestamp(Date.now() / 1000, "Y-M-D");
          this.startDate2 = this.timestamp(
            Date.now() / 1000 - 86400 * 6,
            "Y-M-D"
          );
          break;
        case "30天":
          this.endDate2 = this.timestamp(Date.now() / 1000, "Y-M-D");
          this.startDate2 = this.timestamp(
            Date.now() / 1000 - 86400 * 29,
            "Y-M-D"
          );
          break;
        case "90天":
          this.endDate2 = this.timestamp(Date.now() / 1000, "Y-M-D");
          this.startDate2 = this.timestamp(
            Date.now() / 1000 - 86400 * 89,
            "Y-M-D"
          );
          break;
        default:
          this.startDate2 = this.FabulousliveTime[0];
          this.endDate2 = this.FabulousliveTime[1];
          break;
      }
      this.FabulousliveTime = [this.startDate2, this.endDate2];
      this.$axios
        .get("/api/Author/GetFansFavoriteTrend", {
          params: {
            AuthorId: this.Introduction.authorId,
            trendType: 2,
            star_time: this.startDate2,
            end_time: this.endDate2,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.FabulousEchart.yData1 = res.data.data.datas1;
            this.FabulousEchart.yData2 = res.data.data.datas2;
            res.data.data.dates.forEach((item, index) => {
              this.FabulousEchart.xData.push(this.timestamp(item, "Y-M-D"));
              return this.FabulousEchart.xData;
            });
          }
        });
    },

    // 获取--人气数据+带货数据
    GetLiveInfoData() {
      return new Promise((resolve, reject) => {
        this.isBoxLoading = true;
        this.$axios
          .get("/api/live/GetLiveInfoData", {
            params: {
              // roomId:id,  //直播间id
              roomId: this.$route.params.id,
            },
          })
          .then((res) => {
            this.isBoxLoading = false;
            this.once = false;
            // res.data.code = 1003;
            resolve(res.data.code);
            if (res.data.code == 0) {
              this.InfoData = res.data.data;
            }
          });
      });
    },
    // 商品和小店分类
    getCateList() {
      let that = this;
      that.$axios
        .get(
          "/api/live/cate",
          {
            params: {
              roomId: this.$route.params.id,
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel02 != null) {
                that.cancel02();
              }
              that.cancel02 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            that.proKindList = res.data.data.cateList;
            that.shopKindList = res.data.data.shopList;
            that.getProList();
            that.setCondition();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 商品品牌
    GetBrandByRoomId() {
      let that = this;
      that.$axios
        .get(
          "api/live/GetBrandByRoomId",
          {
            params: {
              roomId: that.$route.params.id,
              // roomId: "6960648770119863054"
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel02 != null) {
                that.cancel02();
              }
              that.cancel02 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            this.brandList = res.data.data;
            // that.getProList()
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 商品列表
    getProList() {
      let that = this;
      that.loading1 = true;
      // 商品类目
      let proCateId = 0;
      that.proKindList.map((item, index) => {
        if (item.name == this.proKind) {
          proCateId = item.value;
        }
      });
      let proIds = 0;
      that.proKindList.map((item, index) => {
        if (item.name == this.proKind) {
          proIds = item.proIds;
        }
      });

      // 小店分类
      let shopId = 0;
      that.shopKindList.map((item, index) => {
        if (item.name == this.shopKind) {
          shopId = item.value;
        }
      });
      // shopIds
      let shopIds = null;
      that.shopKindList.map((item, index) => {
        if (item.name == this.shopKind) {
          shopIds = item.shopIds;
        }
      });
      // 商品品牌
      let brandId = " ";
      that.brandList.map((item, index) => {
        if (item.name == this.brand) {
          brandId = item.brandId;
        }
      });
      let brandIds = " ";
      that.brandList.map((item, index) => {
        if (item.name == this.brand) {
          brandIds = item.brandIds;
        }
      });
      that.$axios
        .post(
          "/api/live/prosearch1",
          {
            roomId: that.$route.params.id,
            proIds: proIds,
            proCateId: proCateId,
            shopId: shopId,
            shopIds: shopIds,
            key: this.trimStr(that.keyword),
            page: that.page, //页数
            size: 8,
            brandId: brandId,
            // sort: 'Volume', //销量=Volume，销量额=Amount
            sort: this.sort,
            sortType: this.orderType,
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel03 != null) {
                that.cancel03();
              }
              that.cancel03 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            that.proList = that.proList.concat(res.data.data.data);
            this.count = res.data.count;
            this.volume = res.data.data.volume;
            this.amount = res.data.data.amount;
            this.proId = res.data.data.proId;
            res.data.data.length < 20
              ? (that.busy = true)
              : (that.busy = false);
            that.loading1 = false;
          } else if (res.data.code == 1002) {
            that.loading1 = false;
          } else {
            that.busy = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取--观众画像
    getFansPortrait() {
      this.$axios
        .get("api/live/analysis", {
          params: {
            roomId: this.$route.params.id,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.pieGenderData = res.data.data.fansSexList;
            this.fansxData = res.data.data.fansAgeList;
            this.fansDiYu = res.data.data.fansFrom;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /* 折线图 */
    trend() {
      let that = this;
      this.xData01 = [];
      this.loading = true;
      let typeIDs = this.type.toString();
      this.$axios
        .get("api/live/trend1", {
          params: {
            roomId: this.$route.params.id,
            type: typeIDs,
            markType: 0,
          },
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01) that.cancel01();
              that.cancel01 = c;
            }),
          }
        )
        .then((res) => {
          this.loading = false;
          if (res.data.code == 0) {
            that.saleNumList = res.data.data;
            that.isFristPushX = false;
            res.data.data.dataUnix.map((element) => {
              that.xData01.push(that.timestamp(element, "h:m:s"));
            });
            // res.data.data.markUnix.forEach(element => {
            //   that.xIcons.push(that.timestamp(element, 'h:m:s'));
            //   return that.xIcons;
            // });
            if (res.data.data.trendData.length == 3) {
              that.y1Data01 = res.data.data.trendData[0];
              that.y2Data01 = res.data.data.trendData[1];
              that.y3Data01 = res.data.data.trendData[2];
            } else {
              that.y1Data01 = res.data.data.trendData[0];
              that.y2Data01 = res.data.data.trendData[1];
            }
          } else {
            that.xData01 = [];
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取直播间列表?????
    GetLiveRoomsByProId(liveDataItem) {
      this.liveBoxData = liveDataItem;
      let that = this;
      // this.loading = true;
      this.GetLiveVolPriByPro();
      return;
    },
    /* 弹出框的折线图 */
    GetLiveVolPriByPro() {
      this.loading2 = true;
      this.$axios
        .get("api/live/GetLiveVolPriByPro", {
          params: {
            roomId: this.$route.params.id,
            proId: this.liveBoxData.proId,
          },
        })
        .then((res) => {
          this.tspans = [];
          this.vtrend = [];
          if (res.data.code == 0) {
            if (this.showJgXl == true) {
              this.vtrend = res.data.data.volumeTrend;
            } else {
              this.vtrend = res.data.data.priceTrend;
            }
            this.loading2 = false;
            res.data.data.timespans.forEach((element) => {
              this.tspans.push(this.timestamp(element, "h:m:s"));
              return this.tspans;
            });
            this.tspans = this.tspans;
          }
        });
    },
    // 热门直播间分页
    changePage(n) {
      this.page = n;
      this.proList = [];
      this.getProList();
    },
    // 弹窗分页
    changePages(n) {
      // this.page = n
      // this.proList = []
      // this.getProList()     //调取的接口需修改
    },
    /* 跳转连接--实时直播大屏 */
    go_to_page02(id) {
      let router = this.$router.resolve({
        path: `/live/${id}`,
      });
      window.open(router.href, "_blank");
    },
    /* 跳转到商品详情*/
    togoods(id) {
      let router = this.$router.resolve({
        path: `/talent_main/shop_main/${id}`,
      });
      window.open(router.href, "_blank");
    },
    /* 跳转达人 */
    totable(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}`,
      });
      window.open(router.href, "_blank");
    },
    /* tab按钮点击变色 */
    changeclass(n) {
      for (var i = 0; i < 4; i++) {
        this.acts.splice(i, 1, -1);
      }
      this.acts.splice(n, 1, 1);
    },
    // 添加对比
    addCompare(val) {
      // 判断当前数组长度 需小于6

      if (this.num < 5) {
        let a = this.taentNewData.every((el, index) => {
          return el.roomId != val.roomId;
        });

        if (a) {
          const newData = JSON.parse(
            localStorage.getItem("liveDetails_Contrast")
          );
          if (newData) {
            newData.push(val);
            localStorage.setItem(
              "liveDetails_Contrast",
              JSON.stringify(newData)
            );
          } else {
            localStorage.setItem("liveDetails_Contrast", JSON.stringify([]));
            const newData2 = JSON.parse(
              localStorage.getItem("liveDetails_Contrast")
            );
            newData2.push(val);
            localStorage.setItem(
              "liveDetails_Contrast",
              JSON.stringify(newData2)
            );
          }
          this.taentNewData = JSON.parse(
            localStorage.getItem("liveDetails_Contrast")
          );
          // 存id
          let compareArr = [];
          if (JSON.parse(localStorage.getItem("liveRoom_Contrast_id"))) {
            compareArr = JSON.parse(
              localStorage.getItem("liveRoom_Contrast_id")
            );
          }
          compareArr.push(val.roomId);
          localStorage.setItem(
            "liveRoom_Contrast_id",
            JSON.stringify(compareArr)
          );
          this.num = this.taentNewData.length;
        } else {
          this.taentNewData.forEach((item, index) => {
            if (item.roomId == val.roomId) {
              // 删除id
              let delIndex = JSON.parse(
                localStorage.getItem("liveRoom_Contrast_id")
              ).findIndex((i) => i == item.roomId);
              let inCompareList = JSON.parse(
                localStorage.getItem("liveRoom_Contrast_id")
              );
              inCompareList.splice(delIndex, 1);
              localStorage.setItem(
                "liveRoom_Contrast_id",
                JSON.stringify(inCompareList)
              );

              this.taentNewData.splice(index, 1);
              localStorage.setItem(
                "liveDetails_Contrast",
                JSON.stringify(this.taentNewData)
              );
              this.taentNewData = JSON.parse(
                localStorage.getItem("liveDetails_Contrast")
              );
            }
            this.num = this.taentNewData.length;
          });
        }
      } else {
        this.taentNewData.forEach((item, index) => {
          let b = this.taentNewData.every((el, index) => {
            return el.roomId != val.roomId;
          });

          if (!b) {
            if (item.roomId == val.roomId) {
              // 删除id
              let delIndex = JSON.parse(
                localStorage.getItem("liveRoom_Contrast_id")
              ).findIndex((i) => i == item.roomId);
              let inCompareList = JSON.parse(
                localStorage.getItem("liveRoom_Contrast_id")
              );
              inCompareList.splice(delIndex, 1);
              localStorage.setItem(
                "liveRoom_Contrast_id",
                JSON.stringify(inCompareList)
              );

              this.taentNewData.splice(index, 1);
              localStorage.setItem(
                "liveDetails_Contrast",
                JSON.stringify(this.taentNewData)
              );
              this.taentNewData = JSON.parse(
                localStorage.getItem("liveDetails_Contrast")
              );
              this.num = this.taentNewData.length;
            }
          } else {
            if (document.getElementsByClassName("el-message").length === 0) {
              this.$message({
                message: "对比直播间数不得超过5个",
                center: true,
                duration: 1500,
                offset: 444,
                type: "warning",
              });
            }
          }
        });
      }
    },
    // 清空
    empty() {
      this.taentNewData = [];
      localStorage.setItem(
        "liveDetails_Contrast",
        JSON.stringify(this.taentNewData)
      );
      localStorage.setItem("liveRoom_Contrast_id", JSON.stringify([]));
      this.num = this.taentNewData.length;
    },
    // 鼠标移入显示删除按钮
    mouseOver(item, index) {
      this.isShowImg = item.authorId;
    },
    // 鼠标移入隐藏删除按钮
    mouseleave() {
      this.isShowImg = "";
    },

    // 点击×删除单个达人
    deleteTalent(id) {
      this.taentNewData.forEach((item, index) => {
        if (item.roomId == id) {
          this.taentNewData.splice(index, 1);

          localStorage.setItem(
            "liveDetails_Contrast",
            JSON.stringify(this.taentNewData)
          );

          let delIndex = JSON.parse(
            localStorage.getItem("liveRoom_Contrast_id")
          ).findIndex((i) => i == item.roomId);

          let inCompareList = JSON.parse(
            localStorage.getItem("liveRoom_Contrast_id")
          );
          inCompareList.splice(delIndex, 1);
          localStorage.setItem(
            "liveRoom_Contrast_id",
            JSON.stringify(inCompareList)
          );

          this.taentNewData = JSON.parse(
            localStorage.getItem("liveDetails_Contrast")
          );
          this.num = this.taentNewData.length;
        }
      });
    },
    // 确定对比
    comparison() {
      let that = this;
      this.showButton = true;
      this.showLoading1 = true;
      this.$axios
        .get("/api/customer/GetNumberofvisitsDetailed", {
          params: {
            API: "/api/live/LiveCompare",
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.surplusCount = res.data.data.surplusCount;
            if (res.data.data.surplusCount) {
              this.$axios
                .get(
                  "/api/live/LiveCompare",
                  {
                    params: {
                      roomids: JSON.parse(
                        localStorage.getItem("liveRoom_Contrast_id")
                      ).join(","),
                    },
                  },
                  {
                    cancelToken: new that.$axios.CancelToken(function executor(
                      c
                    ) {
                      if (that.cancel != null) {
                        that.cancel();
                      }
                      that.cancel = c;
                    }),
                  }
                )
                .then((res) => {
                  if (res.data.code == 0) {
                    this.showLoading1 = true;
                    // this.talentDetails = true;
                    this.empty();
                    this.$router.push({
                      path: "/talent_main/liveBroadcasting",
                      query: { data: "4" },
                    });
                    // this.item_id = res.data.data;
                  }
                })
                .catch((err) => {
                  console.log(err);
                });
            } else {
              this.$message({
                message: "您的对比次数已用完，请升级您的会员等级。",
                duration: 2000,
                customClass: "includeMessage",
                offset: 154,
              });
            }
          }
        });
    },
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>

<style lang="less" scoped>
.liveDetails {
  display: flex;
  padding: 14px 14px 0 14px;
  box-sizing: border-box;
  background: #f1f1f1;
  height: calc(100vh - 80px);
  /* 左侧信息栏 */
  .boxleft {
    width: 300px;
    margin-right: 10px;
    // 直播信息
    .bltop {
      padding: 20px 0 0 20px;
      margin-bottom: 10px;
      .live1 {
        width: 258px;
        margin-top: 17px;
        margin-bottom: 20px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #fd7f2c;
        border-radius: 4px;
        font-size: 14px;
        color: #fd7f2c;
        text-align: center;
        cursor: pointer;
      }
      .title {
        display: flex;
        align-content: center;
        position: relative;
        .titlelogo {
          display: block;
          width: 50px;
          height: 50px;
          border-radius: 6px;
          margin-right: 10px;
        }
        .zhibo {
          position: absolute;
          bottom: 0;
          left: 32px;
          width: 18px;
          height: 18px;
          background-image: linear-gradient(90deg, #ff295d 1%, #fa4fa2),
            linear-gradient(#fff, #fff);
          background-blend-mode: normal, normal;
          border-radius: 4px;
          font-size: 12px;
          color: #fff;
          border-radius: 6px 0px 4px 0px;
        }
        > p {
          width: 197px;
          font-size: 16px;
          // line-height: 24px;
          color: #222;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          vertical-align: middle;
          align-self: center;
          span {
            display: inline-block;
            width: 19px;
            height: 16px;
            img {
              display: block;
            }
          }
        }
        p:nth-of-type(1) {
          span {
            margin-right: 2px;
          }
        }
      }
      .bltime {
        width: 260px;
        font-size: 12px;
        color: #888888;
        padding-bottom: 20px;
        span {
          display: inline-block;
          width: 120px;
          margin-left: 24px;
          font-size: 13px;
          color: #222222;
        }
      }
      .bltime:nth-of-type(4) {
        width: 260px;
        border-bottom: solid 1px #efefef;
      }
      .blbtn {
        // padding: 16px 0 20px 40px;  //一个按钮时
        padding: 20px 0;
        transform: translateX(-10px);
        text-align: center;
        span {
          display: inline-block;
          width: 80px;
          line-height: 32px;
          border-radius: 6px;
          border: solid 1px #fd7f2c;
          font-size: 14px;
          color: #fd7f2c;
          text-align: center;
          cursor: pointer;
        }
        span:nth-of-type(2) {
          margin-left: 20px;
        }
      }
    }
    // 直播达人信息
    .blbot {
      padding: 20px 0 0 20px;
      .portrait {
        display: flex;
        margin-bottom: 30px;
        img {
          display: inline-block;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          border: 1px solid #e5e5e5;
        }
        p {
          font-size: 16px;
          color: #222222;
          padding: 7px 0 8px 10px;
          width: 196px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          span {
            display: block;
            font-size: 12px;
            color: #888;
            padding-top: 5px !important;
          }
        }
      }
      .infor {
        padding-bottom: 20px;
        font-size: 12px;
        color: #888;
        span {
          font-size: 13px;
          color: #222;
        }
      }
      .sex {
        //性别
        img,
        span {
          // width: 15px;
          height: 15px;
          margin-left: 52px;
        }
      }
      // 口碑
      .mouth {
        display: flex;
        p {
          margin-right: 26px;
        }
        .info_item-right {
          display: flex;
          span:nth-of-type(1) {
            margin-right: 5px;
          }
          img {
            width: 13px;
            height: 13px;
            margin-left: 7px;
            margin-top: 2px;
            cursor: pointer;
          }
        }
      }
      // 总数
      .in-num {
        span {
          display: inline-block;
          margin-left: 26px;
        }
        img {
          width: 13px;
          height: 13px;
          margin-left: 5px;
          margin-top: -3px;
          cursor: pointer;
        }
      }
    }
    .talentCompare {
      width: 260px;
      height: 130px;
      background-color: #ffffff;
      border-radius: 4px;
      margin-top: 10px;
      padding: 20px;
      position: relative;
      .top {
        display: flex;
        justify-content: space-between;
        div:nth-child(1) {
          color: #222222;
          font-weight: 600;
          font-size: 14px;
          display: flex;
          p {
            padding-left: 5px;
          }
        }
        span:nth-child(2) {
          font-size: 14px;
          cursor: pointer;
          color: #888888;
        }
      }
      .img_center {
        margin-top: 20px;
        display: flex;
        position: relative;
        .img_box {
          width: 44px;
          height: 44px;
          border-radius: 4px;
          margin-right: 10px;

          background-image: url("../../../../assets/li/no_liveRoom.png");
          .img_talent {
            cursor: pointer;
            width: 100%;
            height: 100%;
          }
        }
        .img_box:nth-last-child(1) {
          margin-right: 0px;
        }
      }
      .img_center_box {
        z-index: 1;
        position: relative;
        top: -43px;
        display: flex;
        .img_box {
          width: 44px;
          height: 44px;
          border-radius: 4px;
          margin-right: 10px;
          position: relative;
          img {
            width: 44px;
            height: 44px;
            border-radius: 4px;
            margin-right: 10px;
            cursor: pointer;
          }
          img:nth-last-child(1) {
            margin-right: 0px;
          }
          .delete_talent {
            width: 14px;
            height: 14px;
            position: absolute;
            right: 0;
            top: 0;
            cursor: pointer;
          }
        }
      }
      .button_box {
        text-align: center;
        position: absolute;
        bottom: 20px;
        left: 33%;
        button {
          width: 80px;
          height: 32px;
          background-color: #b5b5b5;
          border-radius: 4px;
          margin-top: 15px;
          font-size: 14px;
          color: #ffffff;
        }
        .button_affirm {
          background-color: #fd7f2c;
        }
        .confirmBtn {
          position: relative;
          width: 80px;
          height: 32px;
          line-height: 32px;
          background-color: #fd7f2c;
          border-radius: 4px;
          margin-top: 15px;
          font-size: 14px;
          color: #ffffff;
        }
      }
    }
  }
  /* 右侧数据栏 */
  .boxright {
    position: relative;
    flex: 1;
    height: 100%;
    overflow-y: auto;
    /* 头部留白 */
    .top-top {
      width: 99%;
      height: 20px;
      position: absolute;
      top: 50px;
      background: #fff;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      z-index: 100;
    }
    // tab按钮
    .tabbtn > button {
      padding-left: 23px;
      padding-right: 23px;
      height: 40px;

      background-color: #fff;
      border-radius: 4px;
      margin-right: 7px;
      margin-bottom: 10px;
      font-size: 14px;
      color: #555;
      text-align: center;
      text-decoration: none;
      font-weight: 600;
      cursor: pointer;
    }
    .tabbtn > button:hover {
      color: #ff924b;
    }
    dl {
      display: flex;
      font-size: 14px;
      margin-bottom: 10px;
      // margin-top: 10px;
      &:last-child {
        margin-bottom: 0;
      }
      dt {
        padding-top: 6px;
        // width: 78px;
        margin-right: 20px;
        flex-shrink: 0;
        color: #888;
      }
      dd {
        position: relative;
        color: #555;
        height: 32px;
        overflow: hidden;
        .cg_items {
          // position: relative;
          display: inline-block;
          font-size: 0;
          span:hover {
            color: #ff924b;
          }
          span {
            display: inline-block;
            height: 32px;
            padding: 0 16px;
            // margin-bottom: 5px;
            line-height: 32px;
            font-size: 14px;
            cursor: pointer;
            vertical-align: middle;
            margin-right: 8px;
            &.active {
              color: #fd7f2c;
              background-color: #fff1e8;
              border-radius: 4px;
            }
          }
          i {
            position: absolute;
            display: none;
            right: 0;
            top: 6px;
            font-size: 14px;
            font-style: normal;
            color: #fd7f2c;
            cursor: pointer;
          }
        }
        &.overstep {
          padding-right: 22px;
          .cg_items {
            i {
              display: inline-block;
              vertical-align: middle;
            }
          }
        }
        &.is_unfold {
          padding-right: 0;
          height: inherit;
          .cg_items {
            i {
              position: inherit;
            }
          }
        }
      }
    }
    // 数据（内容）
    .main {
      height: calc(100% - 20px);
      padding-left: 20px;
      padding-right: 20px;
      box-sizing: border-box;
      overflow-y: auto;
      position: relative;
      top: 0;
      left: 0;
    }
    /* 直播数据分析-人气数值 */
    .moodbox {
      padding-top: 33px;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      margin-bottom: 40px;
      p:nth-of-type(1) {
        margin-left: 10%;
      }
      p {
        width: 10%;
        line-height: 1;
        font-size: 22px;
        color: #222222;
        font-family: DINAlternate-Bold;
        text-align: center;
        span {
          display: block;
          font-size: 12px;
          // font-weight: normal;
          color: #888;
          padding-top: 12px;
        }
      }
    }
    /* 数据趋势 */
    .trend {
      .check:nth-of-type(1) {
        margin-top: 30px;
      }
      .check {
        display: flex;
        margin-bottom: 20px;
        span {
          display: block;
          font-size: 14px;
          color: #888;
          margin-right: 30px;
        }
      }
    }
    /* 搜索框 */
    .searchBox {
      margin-top: 17px;
      margin-bottom: 10px;
      width: 308px;
      height: 32px;
      border-radius: 4px;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #eed5d5;
      input::-webkit-input-placeholder {
        color: #c8c8c8;
      }
      .el-input {
        line-height: 32px;
      }
      .el-input__inner {
        flex: 1;
        background-color: #fff;
        border: solid 1px #e5e5e5;
        height: 32px;
        line-height: 32px;
        border-radius: 4px 0 0 4px;
      }
      .imgBox:hover {
        background: url("../../../../assets/wang/talentCompare/search.png")
            no-repeat 10px 7px,
          #fff;
        background-size: 15px 15px;
      }
      .imgBox {
        height: 30px;
        width: 38px;
        border: 1px solid #e5e5e5;
        border-left: 0;
        border-radius: 0px 4px 4px 0px;
        cursor: pointer;
        place-items: center;
        position: relative;
        background: url("../../../../assets/wang/talentCompare/search-nohover.png")
            no-repeat 10px 7px,
          #fff;
        background-size: 15px 15px;
        img {
          width: 15px;
          height: 15px;
          position: absolute;
          top: 30%;
          left: 30%;
        }
      }
    }
    /* 统计表 */
    .census {
      display: flex;
      div {
        width: 33%;
        line-height: 50px;
        background-color: #f5f5f5;
        margin: 0 20px 10px 0;
        padding: 0 60px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        &:last-child {
          margin-right: 0;
        }
        p {
          color: #888;
          font-size: 14px;
        }
        span {
          display: block;
          color: #222;
          font-size: 18px;
          font-family: DINAlternate-Bold;
        }
      }
    }
    /* 商品表格 */
    .last_list {
      margin-bottom: 20px;
    }
    table {
      text-align: center;
      margin-bottom: 20px;
      thead {
        img {
          width: 5px;
          height: 10px;
          vertical-align: 0;
          margin-right: 2px;
          cursor: pointer;
        }
        tr {
          th {
            padding: 0 2px;
          }
          th:first-child {
            text-align: left;
            padding-left: 24px;
          }
          th:nth-child(2) th:nth-child(3),
          th:nth-child(4),
          th:nth-child(5),
          th:nth-child(6),
          th:nth-child(7) {
            width: 11%;
          }
          th:nth-child(8) {
            width: 14%;
          }
        }
      }
      tbody {
        tr {
          height: 78px;
          td {
            padding: 0 2px;
          }
          td:nth-child(2),
          td:nth-child(3),
          td:nth-child(4),
          td:nth-child(5),
          td:nth-child(6),
          td:nth-child(7) {
            font-family: DINAlternate-Bold;
            font-size: 15px;
            color: #222222;
          }
          td:last-of-type {
            span {
              display: block;
              width: 88px !important;
              margin: 0 auto;
              line-height: 32px;
              background: transparent;
              border: 1px solid #fd7f2c;
              font-size: 14px;
              color: #fd7f2c;
              text-align: center;
            }
          }
        }
        .rankNum {
          font-size: 15px;
        }
      }
      // 数量
      .numBox {
        span:nth-of-type(1) {
          font-size: 16px !important;
        }
      }
      // 商品
      .rightBox {
        display: flex;
        align-items: center;
        padding-left: 24px;
        .picture {
          width: 50px;
          height: 50px;
          img {
            width: 50px;
            height: 50px;
            border-radius: 6px;
            object-fit: cover;
          }
        }
        .info {
          margin-left: 10px;
          text-align: left;
          .info_top:hover {
            color: #fd7f2c;
          }
          .info_top {
            font-size: 14px;
            color: #222222;
            font-weight: 600;
            width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            img {
              width: 14px;
              height: 14px;
              margin-right: 4px;
            }
            .goods_iden {
              text-align: center;
              display: inline-block;
              // width: 32px;
              padding: 0 4px;
              height: 16px;
              background-color: #fff7ee;
              border-radius: 4px;
              border: solid 1px #fd7f2c;
              font-size: 12px;
              font-weight: normal;
              line-height: 16ppx;
              color: #fd7f2c;
            }
          }
          .info_btm {
            font-size: 13px;
            color: #888888;
            margin-top: 4px;
          }
        }
      }
      // 操作
      .optionBox {
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 32px;
          height: 32px;
          margin-right: 16px;
          cursor: pointer;
        }
        img:last-child {
          margin-right: 0;
        }
        .optionBox-details {
          width: 88px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          background-color: #fd7f2c;
          border-radius: 4px;
          font-size: 14px;
          color: #fff;
          margin: 0 auto;
          cursor: pointer;
        }
        .optionBox-details:hover {
          background-color: #ff924b;
        }
      }
    }
  }
  /* 观众画像 */
  .viewerbox {
    display: flex;
    padding-bottom: 120px;
    // 观众画像
    .vbleft {
      width: 51.3%;
      .second_hua {
        margin-top: 30px;
        height: 60px;
        p {
          min-height: 40px;
          line-height: 40px;
          text-align: center;
          color: #555;
          font-size: 14px;
        }
      }
      .zanwu{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #b5b5b5;
      }
      .second_echart {
        height: 300px;
        // p {
        //   min-height: 200px;
        //   line-height: 200px;
        //   text-align: center;
        //   color: #555;
        //   font-size: 14px;
        // }
      }
    }
    // 观众来源分析
    .vbright {
      width: 48.6%;
      .zanwu{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #b5b5b5;
      }
    }
  }
  .viewerbox01{
    padding-bottom: 60px;
  }
  /* 弹出框折线图 */
  .popup_wrap {
    padding: 20px 30px 0;
    .popup_wrap-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        font-size: 16px;
        font-weight: 600;
        color: #222;
      }
      .switch {
        display: flex;
        .switch-btn {
          width: 50px;
          height: 28px;
          line-height: 28px;
          text-align: center;
          font-size: 13px;
          color: #555555;
          background-color: #fff;
          border: 1px solid #efefef;
          box-sizing: border-box;
          cursor: pointer;
        }
        .switch-btn:first-child {
          border-radius: 6px 0px 0px 6px;
          border-right: 1px solid #fd7f2c;
        }
        .switch-btn:last-child {
          border-radius: 0px 6px 6px 0px;
        }
        .native {
          border: 1px solid #fd7f2c !important;
          color: #fd7f2c;
        }
      }

      .time_slot {
        position: relative;
        left: -20px;
        // height: 62px;
        display: flex;
        // justify-content: flex-end;
        // align-items: flex-end;
        .tab01 {
          margin-right: 20px;
        }
      }
    }
    .popup_wrap-explain {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 12px;
      span {
        margin-right: 4px;
      }
      .text {
        font-size: 13px;
        color: #555;
        margin-left: 18px;
        .num {
          color: #fd7f2c;
        }
      }
    }
    .popup_wrap-echart {
      width: 100%;
      height: 300px;
    }
    .m-t30 {
      margin-top: 30px;
    }
  }
}
/* 搜索框 */
.el-input__inner {
  height: 32px !important;
  line-height: 32px !important;
}
/* 直播间弹框--直播数据 */
.hotRoomBox {
  padding: 20px 30px 0 30px;
  box-sizing: border-box;
}
/* 直播间弹框--销量趋势图 */
.trends {
  padding: 20px 30px 0 30px;
  box-sizing: border-box;
  position: relative;
}
.hbnumbox {
  //商品直播数据
  > p {
    margin-bottom: 20px;
  }
  .hbnum {
    display: flex;
    border-bottom: 1px solid #efefef;
    img {
      display: block;
      width: 50px;
      height: 50px;
      border-radius: 6px;
      margin-right: 10px;
      margin-bottom: 20px;
      border: 1px solid #e5e5e5;
    }
    p {
      font-size: 14px;
      color: #222;
      padding-top: 4px;
      font-weight: 600;
      span {
        display: block;
        color: #888;
        padding-top: 6px;
      }
    }
  }
  .datas {
    display: flex;
    margin: 30px 0 38px 0;
    div:last-of-type {
      border-right: 0;
    }
    p {
      width: 24.6%;
      font-size: 24px;
      color: #222;
      text-align: center;
      padding-right: 50px;
      padding-left: 50px;
      span {
        display: block;
        font-size: 12px;
        color: #888;
        padding-top: 10px;
      }
    }
  }
}
/* 弹窗中的分页 */
.pageBoxs {
  text-align: center;
  margin: 12px 0 20px 0;
}
/* 圆角 */
.fillet {
  border-radius: 4px;
  background-color: #fff;
}
/* 侧边 */
.slide {
  line-height: 1;
  font-size: 16px;
  color: #222222;
  font-weight: 600;
  position: relative;
  text-indent: 9px;
}
.slide::after {
  content: "";
  position: absolute;
  left: 0;
  top: 48%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background-color: #fd7f2c;
  border-radius: 2px;
}
.slide > span {
  margin-left: 5px;
  font-size: 12px;
  letter-spacing: 0;
  color: #888;
  line-height: 25px;
  // vertical-align: bottom;
}
/* 小手 */
.hands {
  cursor: pointer;
}
/* 边框 */
.border {
  width: 1px;
  border-left: 1px solid #e5e5e5;
}
/* 鼠标经过 */
.hoverfill:hover {
  color: #ff924b;
}
.changecolone:hover {
  color: #fd7f2c !important;
}
.hoverb:hover {
  color: #fd7f2c !important;
}
/* 响应式 */
@media screen and (max-width: 1400px) {
  #liveDetails .moodbox {
    display: flex;
    flex-wrap: wrap;
    p {
      width: 14%;
    }
    .mbfan {
      margin-top: 30px;
      margin-left: 10%;
    }
    .mbfans {
      margin-top: 30px;
    }
    .marleft {
      margin-left: 11%;
    }
    .bor4 {
      border: 0 !important;
    }
  }
  #liveDetails #mb2,
  #mb3 {
    p {
      // width: 17%;
    }
  }
}
/*  */
.switch {
  display: flex;
  width: 108px;
  height: 28px;
  position: relative;
  left: -13px;
  top: 84px;
  z-index: 222;
  .switch-btn {
    width: 50px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 13px;
    color: #555;
    background-color: #fff;
    border: 1px solid #efefef;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
  }
  .switch-btn:first-child {
    border-radius: 6px 0 0 6px;
    // border-right: none;
  }
  .switch-btn:last-child {
    border-radius: 0 6px 6px 0;
    // border-right: none;
  }
}
.switch .native {
  border: 1px solid #fd7f2c;
  color: #fd7f2c;
}
/* tab 按钮的默认选中状态 */
.showClass {
  background-color: #fd7f2c !important;
  color: #ffff !important;
}
.vip_pay_box {
  position: relative;
  width: 100%;
  height: 100%;
  img {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    filter: blur(6px);
  }
  .vip_pay_warp {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
